<template>
  <div class="background-container">
    <canvas ref="canvas" class="background-canvas"></canvas>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CanvasBackground',
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      const stars = [];
      const numStars = 100;

      class Star {
        constructor() {
          this.reset();
        }

        reset() {
          this.x = Math.random() * canvas.width;
          this.y = Math.random() * canvas.height;
          this.size = Math.random() * 2;
          this.speed = Math.random() * 0.5;
          this.opacity = Math.random();
        }

        update() {
          this.y += this.speed;
          if (this.y > canvas.height) {
            this.reset();
            this.y = 0;
          }
        }

        draw() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
          ctx.fill();
        }
      }

      function initStars() {
        for (let i = 0; i < numStars; i++) {
          stars.push(new Star());
        }
      }

      function animateStars() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        stars.forEach(star => {
          star.update();
          star.draw();
        });
        requestAnimationFrame(animateStars);
      }

      initStars();
      animateStars();
    }
  }
};
</script>

<style scoped>
.background-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.background-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: white;
  font-size: 24px;
  font-weight: bold;
}
</style>
